<template>
    <el-row class="home" :gutter="75" style="flex-wrap: wrap; display: flex;">
        <el-col :span="8" style="margin:20px">
            <el-card class="box-card" shadow="hover">
                <div slot="header">
                    <p>admin</p>
                    <p>超级管理员</p>
                </div>
                <div>
                    <p><span>上次登录时间：</span>2022-1-17</p>
                    <p><span>上次登录地点：</span>武汉</p>
                </div>
            </el-card>
            <el-card style="margin-top:20px; height:450px" shadow="hover">
                    <el-table :data="tableData" size="mini">
                        <el-table-column prop="date" label="销售额" width="80">
                        </el-table-column>
                        <el-table-column prop="name" label="采购额" width="80">
                        </el-table-column>
                        <el-table-column prop="address" label="供应商数量" width="90">
                        </el-table-column>
                        <el-table-column prop="address" label="客户数量" width="90">
                        </el-table-column>
                    </el-table>
            </el-card>
        </el-col>
        <el-col :span="8" style="margin:20px">
            <el-card class="box-card" shadow="hover">
                <div id="main" style="height:280px">
                    111
                </div>
            </el-card>
        </el-col>
        <!-- <el-col :span="16" style="margin-top:20px">
            <el-card>
            </el-card>
                <div class="num">
                    <el-card></el-card>
                    <el-card></el-card>
                </div>
        </el-col> -->
    </el-row>
</template>

<script>

     import * as echarts from 'echarts'
export default {
    
    data(){
        
        return{
            tableData:[
                {
                    date:'￥100'
                }
            ]
        }
        
    },
    mounted(){
      var ROOT_PATH = 'https://echarts.apache.org/examples';

      var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'white');
var option;

option = {
  title: {
    text: '统计',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

}}
</script>

<style lang="less" scoped>
.el-table{
    box-shadow: 0 2px 4px 0 white !important;
}
</style>